<!--
 * @Author: your name
 * @Date: 2020-11-03 18:17:53
 * @LastEditTime: 2020-11-04 11:01:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gatt/src/modules/front/pages/EchartChina/index.vue
-->
<template>
  <div id="main"></div>
</template>

<script>
import echarts from 'echarts'
import * as request from '@front/data/apis/EchartChina'
export default {
  name: 'EchartChina',
  data () {
    return {
      form: {
        name: ''
      }
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    async initChart () {
      const chart = echarts.init(document.getElementById('main'))
      const alladcode = await request.getGeoJson('all.json')
      const chinaGeoJson = await request.getGeoJson('100000_full.json')
      this.initEcharts(chinaGeoJson, '全国', chart, alladcode)
    },
    // echarts绘图
    initEcharts (geoJson, name, chart, alladcode) {
      echarts.registerMap(name, geoJson)
      const option = {
        title: {
          text: name,
          left: 'center'
        },
        series: [{
          type: 'map',
          map: name,
          itemStyle: {
            areaColor: '#1890ff'
          }
        }]
      }
      chart.setOption(option)
      // 解绑click事件
      chart.off('click')
      // 给地图添加监听事件
      chart.on('click', params => {
        const clickRegionCode = alladcode.filter(areaJson => areaJson.name === params.name)[0].adcode
        if (clickRegionCode) {
          this.form.name = clickRegionCode + '_full.json'
          request.getGeoJson(this.form.name).then(regionGeoJson => {
            this.initEcharts(regionGeoJson, params.name, chart, alladcode)
          })
            .catch(err => {
              console.log(err)
              this.form.name = '100000_full.json'
              request.getGeoJson(this.form.name).then(chinaGeoJson => this.initEcharts(chinaGeoJson, '全国', chart, alladcode))
            })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
#main
  height 100vh
  width 100vw
</style>
